var serverUrl = '/vtsp/visual';
// 左上角柱饼图
// 镜像圆点饼图配置优化更新---------suwq20201104
// 确定饼图的位置（在HTML所处的位置是哪个容器
var myChart2 = echarts.init(document.querySelector(".bar .chartt"));
// 颜色
var colorList = ['#58D5FF', '#73ACFF', '#FDD56A', '#FDB36A', '#FD866A', '#9E87FF'];
// 饼图的样式
var option2 = {
  // 提示
  tooltip: {
    trigger: 'item',
  },
  series: [
    {
      // 图表类型，饼图
      type: 'pie',
      center: ['50%', '53%'],
      radius: ['58%', '75%'],
      minAngle: 10,
      avoidLabelOverlap: true,
      hoverOffset: 15,
      // 每个扇形图的颜色
      itemStyle: {
        color: (params) => {
          return colorList[params.dataIndex];
        },
      },
      label: {
        show: true,
        position: 'outer',
        alignTo: 'labelLine',
        // ·圆点
        backgroundColor: 'auto', //圆点颜色，auto：映射的系列色
        height: 0,
        width: 0,
        lineHeight: 0,
        // height,width.lineHeight必须为0
        distanceToLabelLine: 0, //圆点到labelline距离
        borderRadius: 2.5,
        padding: [2.5, -2.5, 2.5, -2.5],
        /*radius和padding为圆点大小，圆点半径为几radius和padding各项数值就为几
        如：圆点半径为1
        borderRadius: 1,
        padding: [1, -1, 1, -1]
        */
        // 鼠标移上去提示框的内容
        formatter: '{a|{b}：}{b|{d}%}',
        fontSize:10,
        rich: {
          a: {
            padding: [0, 0, 0, 10],
          },
          b: {
            padding: [0, 10, 0, 0],
          },
        },
      },
      // 饼图的数据
      data: [
        {
          name: 'first',
          value: 1,
        },
        {
          name: 'second',
          value: 2,
        },
        {
          name: 'third',
          value: 3,
        },
        {
          name: 'fourth',
          value: 4,
        },
        {
          name: 'fifth',
          value: 5,
        },
        {
          name: 'sixth',
          value: 6,
        },
      ],
    }
  ],
};
// $.ajax({
//   url: "http://olkll1wkwt4x.ngrok2.xiaomiqiu.cn/vtsp/statistic/visual/getVolunteerDegreeVisual",
//   headers: { "Authorization": "JSESSIONID=0607d2c6-72ed-4801-b1ce-b9c0de339d58", "Content-Type": "application/json" },
//   dataType: "json",
//   async: true,
//   type: "GET",
//   success: function (data) {
//     console.log(data.data);
//     // alert(data.data.length);
//     // 显示在左边框
//     $(".name").append(data.data.userName);
//     // $(".name").append(data.data.userName);
//     // var password = $(".password").val();

//   }

// });
// 实例化
myChart2.setOption(option2);


// 把配置给实例对象
// myChart.setOption(option);
window.addEventListener("resize", function () {
  myChart2.resize();
});
// 左上角柱状图
// 1框的柱状图
var myChart = echarts.init(document.querySelector(".bar .chart"));
var option = {
  // 图表的标题
  title: {
    // 标题内容
    text: '年龄层分布',
    // 标题样式
    textStyle: {
      color: '#bbbbbb',
      fontWeigth: 'normal',
      fontSize: 14
    }
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  legend: {},
  // 与容器的边距
  grid: {
    top: '22%',
    left: '3%',
    right: '4%',
    bottom: '0%',
    containLabel: true
  },
  // x轴样式
  xAxis: {
    type: 'value',
    boundaryGap: [0, 0.01],
    axisLine: {
      // show: false,
      lineStyle: {
        color: '#bbbbbb'
      }
    },
    splitLine: {
      show: false
    },
    // 刻度样式。是否显示刻度
    axisTick: {
      show: false
    }
  },
  // y轴样式
  yAxis: {
    type: 'category',
    // y轴显示的数据类型名
    data: ['50岁以上', '41-50岁', '31-40岁', '21-30岁', '20岁及以下'],
    axisLine: {
      show: false,
      lineStyle: {
        color: '#bbbbbb'
      }
    },
    //刻度样式。是否显示刻度
    axisTick: {
      show: false
    },
    // max: 5
  },
  series: [
    {
      // name: '2011',
      type: 'bar',
      // 类型名对应的数据
      data: [3100, 1500, 2100, 2800, 4990],
      // 柱形的颜色
      itemStyle: {
        color: '#07c2d3'
      },
      // barWidth: 8,
      // 单个柱形与其他柱形的边距
      barCategoryGap: '75%'
    }
  ]
};
myChart.setOption(option);
// 把配置给实例对象
// myChart.setOption(option);


window.addEventListener("resize", function () {
  myChart.resize();
});

// 左下角折线图定制
// 基于准备好的dom，初始化echarts实例
var myChart3 = echarts.init(document.querySelector(".axis .chart"));
var xData = function () {
  var data = [];
  for (var i = 1; i < 31; i++) {
    data.push(i + "日");
  }
  return data;
}();

var option3 = {
  // 图表的标题
  title: {
    // 标题内容
    text: '人数（人）',
    top: 21,
    left: 8,
    // 标题样式
    textStyle: {
      color: '#bbbbbb',
      fontWeigth: 'normal',
      fontSize: 13
    }
  },
  tooltip: {
    trigger: "axis",
    axisPointer: {
      type: "shadow",
      textStyle: {
        color: "#fff"
      }

    },
  },
  grid: {
    borderWidth: 0,
    top: 65,
    bottom: 30,
    // left: 30,
    right: 0,
    // y2: 0,
    textStyle: {
      color: "#fff"
    }
  },
  // legend: {
  //   x: '46%',
  //   top: '11%',
  //   textStyle: {
  //     color: '#90979c',
  //   },
  //   data: ['订单量']
  // },
  calculable: true,
  xAxis: {
    type: "category",
    axisLine: {
      lineStyle: {
        color: '#bbbbbb'
      }
    },
    axisLabel: {
      interval: 0
    },
    splitLine: {
      show: false
    },
    axisTick: {
      show: false
    },
    data: ['2014年', '2015年', '2016年', '2017年', '2018年', '2019年', '2020年', '2021年']
  },

  yAxis: [{
    // name: '人数',
    type: "value",
    splitLine: {
      show: true,
      lineStyle: {
        color: '#bbbbbb20'
      }

    },
    axisLine: {
      show: false,
      lineStyle: {
        color: '#bbbbbb'
      }
    },

    // 刻度样式。是否显示刻度
    axisTick: {
      show: false
    },
  }],
  // dataZoom: [{
  //     show: true,
  //     height: 30,
  //     xAxisIndex: [0],
  //     bottom: 30,

  //     "start": 10,
  //     "end": 80,
  //     handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
  //     handleSize: '110%',
  //     handleStyle: {
  //         color: "#5B3AAE",
  //     },
  //     textStyle:{
  //         color:"rgba(204,187,225,0.5)",
  //     },
  //     fillerColor:"rgba(67,55,160,0.4)",
  //     borderColor: "rgba(204,187,225,0.5)",

  // }, {
  //     type: "inside",
  //     show: true,
  //     height: 15,
  //     start: 1,
  //     end: 35
  // }],
  // animationDuration:6000,
  series: [{
    name: "人数",
    type: "line",
    symbolSize: 11,
    symbol: 'circle',
    itemStyle: {
      color: "#07c2d3",
    },
    markPoint: {
      animationDuration: 1000,
      animationDelay: 3000,
      symbol: 'path://m865.109665,138.74109c42.30229,0 76.913255,23.575892 76.913255,52.390871l0,288.149789c0,28.814979 -34.610965,52.390871 -76.913255,52.390871l-253.813743,0l-92.295906,78.586306l-92.295906,-78.586306l-253.813743,0c-42.30229,0 -76.913255,-23.575892 -76.913255,-52.390871l0,-288.149789c0,-28.814979 34.610965,-52.390871 76.913255,-52.390871l692.219298,0z',
      symbolSize: [60, 30],
      // symbolKeepAspect:
      symbolOffset: ['1%', '-90%'],
      itemStyle: {
        color: "#FF8D00",
        borderCap: 'round',
        // backgroundColor: 'fff'
      },
      label: {
        normal: {
          textStyle: {
            color: '#fff'
          },
          padding: [0, 0, 0, 0]
        }
      },
      data: [{
        type: 'max',
        name: '最大值'
      }]
    },
    animation: true,
    // animationDuration: 1000,
    animationDelay: function (idx) {
      // 越往后的数据延迟越大
      return idx * 500;
    },
    // animationEasing: backIn,
    animationEasing: 'backIn',
    data: [
      50, 155, 200, 180, 250, 300, 320, 150]
  },]
}
// 使用刚指定的配置项和数据显示图表。
myChart3.setOption(option3);


window.addEventListener("resize", function () {
  myChart3.resize();
});

// 中间柱状图
// 1框的柱状图
var myChart4 = echarts.init(document.querySelector(".bar2 .chart"));
var option4 = {
  // 图表的标题
  title: {
    // 标题内容
    text: '服务人数（人）',
    top: 8,
    left: 2,
    // 标题样式
    textStyle: {
      color: '#bbbbbb',
      fontWeigth: 'normal',
      fontSize: 13
    }
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  legend: {},
  // 与容器的边距
  grid: {
    top: '20%',
    left: '1%',
    right: '1%',
    bottom: '0%',
    containLabel: true
  },
  // x轴样式
  xAxis: {
    type: 'category',
    boundaryGap: [0, 0.01],
    axisLine: {
      // show: false,
      lineStyle: {
        color: '#bbbbbb'
      }
    },
    splitLine: {
      show: false
    },
    // 刻度样式。是否显示刻度
    axisTick: {
      show: false
    },
    // y轴显示的数据类型名
    data: ['4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月', '1月', '2月', '3月'],
  },
  // y轴样式
  yAxis: {
    type: 'value',
    axisLine: {
      show: false,
      lineStyle: {
        color: '#bbbbbb'
      }
    },
    //刻度样式。是否显示刻度
    axisTick: {
      show: false
    },
    splitLine: {
      show: false,
      lineStyle: {
        color: '#bbbbbb20'
      }
    },
    // max: 5
  },
  series: [
    {
      // name: '2011',
      type: 'bar',
      // 类型名对应的数据
      data: [3100, 1500, 2100, 2800, 4990, 3100, 1500, 2100, 6000, 4990, 11, 12],
      // 柱形的颜色
      itemStyle: {
        color: '#07c2d3'
      },
      // barWidth: 8,
      // 单个柱形与其他柱形的边距
      barCategoryGap: '86%'
    }
  ]
};
myChart4.setOption(option4);
// 把配置给实例对象
// myChart.setOption(option);

window.addEventListener("resize", function () {
  myChart4.resize();
});

// 右上角折线图定制
// 基于准备好的dom，初始化echarts实例
var myChart5 = echarts.init(document.querySelector(".axis2 .chart"));
var option5 = {
  // 图表的标题
  title: {
    // 标题内容
    text: '活动次数（次）',
    top: 21,
    left: 8,
    // 标题样式
    textStyle: {
      color: '#bbbbbb',
      fontWeigth: 'normal',
      fontSize: 13
    }
  },
  tooltip: {
    trigger: "axis",
    axisPointer: {
      type: "shadow",
      textStyle: {
        color: "#fff"
      }

    },
  },
  grid: {
    borderWidth: 0,
    top: 65,
    bottom: 30,
    // left: 30,
    right: 0,
    // y2: 0,
    textStyle: {
      color: "#fff"
    }
  },
  // legend: {
  //   x: '46%',
  //   top: '11%',
  //   textStyle: {
  //     color: '#90979c',
  //   },
  //   data: ['订单量']
  // },
  calculable: true,
  xAxis: {
    type: "category",
    axisLine: {
      lineStyle: {
        color: '#bbbbbb'
      }
    },
    // axisLabel: {
    //   interval: 0
    // },
    splitLine: {
      show: false
    },
    axisTick: {
      show: false
    },
    data: ['2020年8月', '2020年9月', '2020年10月', '2020年11月', '2020年12月', '2021年1月', '2021年2月', '2021年3月', '2021年4月', '2021年5月', '2021年6月', '2021年7月'],
  },

  yAxis: [{
    // name: '人数',
    type: "value",
    splitLine: {
      show: true,
      lineStyle: {
        color: '#bbbbbb20'
      }

    },
    axisLine: {
      show: false,
      lineStyle: {
        color: '#bbbbbb'
      }
    },

    // 刻度样式。是否显示刻度
    axisTick: {
      show: false
    },
  }],
  // dataZoom: [{
  //     show: true,
  //     height: 30,
  //     xAxisIndex: [0],
  //     bottom: 30,

  //     "start": 10,
  //     "end": 80,
  //     handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
  //     handleSize: '110%',
  //     handleStyle: {
  //         color: "#5B3AAE",
  //     },
  //     textStyle:{
  //         color:"rgba(204,187,225,0.5)",
  //     },
  //     fillerColor:"rgba(67,55,160,0.4)",
  //     borderColor: "rgba(204,187,225,0.5)",

  // }, {
  //     type: "inside",
  //     show: true,
  //     height: 15,
  //     start: 1,
  //     end: 35
  // }],
  // animationDuration:6000,
  series: [{
    name: "次数",
    type: "line",
    symbolSize: 11,
    symbol: 'circle',
    itemStyle: {
      color: "#07c2d3",

    },
    animation: true,
    // animationDuration: 1000,
    animationDelay: function (idx) {
      // 越往后的数据延迟越大
      return idx * 500;
    },
    // animationEasing: backIn,
    animationEasing: 'backIn',
    markPoint: {
      animationDelay: 3000,
      // animationDuration:1000,
      symbol: 'path://m865.109665,138.74109c42.30229,0 76.913255,23.575892 76.913255,52.390871l0,288.149789c0,28.814979 -34.610965,52.390871 -76.913255,52.390871l-253.813743,0l-92.295906,78.586306l-92.295906,-78.586306l-253.813743,0c-42.30229,0 -76.913255,-23.575892 -76.913255,-52.390871l0,-288.149789c0,-28.814979 34.610965,-52.390871 76.913255,-52.390871l692.219298,0z',
      symbolSize: [60, 30],
      // symbolKeepAspect:
      symbolOffset: ['1%', '-90%'],
      itemStyle: {
        color: "#FF8D00",
        // borderCap: 'round'
      },
      // zlevel: 999,
      // padding:[-110,0,0,0],
      label: {
        normal: {
          textStyle: {
            color: '#fff'
          },
          padding: [0, 0, 1, 0]
        }
      },
      data: [{
        type: 'max',
        name: '最大值'
      }]
    },
    data: [
      50, 155, 200, 180, 250, 300, 320, 150, 500, 100, 333, 445]
  },]
}
// 使用刚指定的配置项和数据显示图表。
myChart5.setOption(option5);

window.addEventListener("resize", function () {
  myChart5.resize();
});

// 最后一个框的饼图
// 基于准备好的dom，初始化echarts实例
var myChart6 = echarts.init(document.querySelector(".pie1 .chart"));
var option6 = {
  // backgroundColor: '#273454',
  // 颜色
  color: ['#FF9966', '#FFFFCC', '#0099CC', '#99CC33', '#99CCCC'],
  // 鼠标移上去的提示框组件
  tooltip: {
    // 数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。
    trigger: 'item',
    // 提示框浮层内容格式器，支持字符串模板和回调函数两种形式。
    formatter: "{b} : {c} ({d}%)",
    // 字体样式
    textStyle: {
      fontSize: 15,
    },
  },
  // 图例组件，图例组件展现了不同系列的标记(symbol)，颜色和名字。可以通过点击图例控制哪些系列不显示。
  legend: {
    // 图例的数据数组。数组项通常为一个字符串，每一项代表一个系列的 name（如果是饼图，也可以是饼图单个数据的 name）
    data: ['活动类型1', '活动类型2', '活动类型3', '活动类型4', '活动类型5', '活动类型6', '活动类型7',],
    // 图例列表的布局朝向,左到右
    // vertical上至下
    orient: 'horizontal',
    // 与底部的距离
    bottom: '0',
    // 颜色块的宽高
    itemWidth: 20,
    itemHeight: 14,
    // 图例每项之间的间隔,横向布局时为水平间隔，纵向布局时为纵向间隔
    itemGap: 20,
    // 字体样式
    textStyle: {
      color: '#',
      fontSize: 13,
    },
  },
  series: [{
    // name: 'TITLE',
    type: 'pie',
    // 饼图的扇区是否是顺时针排布
    clockwise: false,
    // 起始角度，支持范围[0, 360]
    startAngle: 90,
    // radius: '35%',
    // 饼图的中心（圆心）坐标，数组的第一项是横坐标，第二项是纵坐标
    center: ['50%', '35%'],
    // 饼图的半径,内外半径
    radius: ['10%', '55%'],

    hoverAnimation: false,
    // 是否展示成南丁格尔图，通过半径区分数据大小
    // 'radius' 扇区圆心角展现数据的百分比，半径展现数据的大小
    // 'area' 所有扇区圆心角相同，仅通过半径展现数据大小
    roseType: 'radius', //area
    data: [{
      value: 335,
      name: '活动类型1'
    },
    {
      value: 310,
      name: '活动类型2'
    },
    {
      value: 234,
      name: '活动类型3'
    },
    {
      value: 135,
      name: '活动类型4'
    },
    {
      value: 148,
      name: '活动类型5'
    },
    {
      value: 147,
      name: '活动类型6'
    },
    {
      value: 341,
      name: '活动类型7'
    }
    ],
    itemStyle: {
      normal: {
        // 图形的描边颜色。支持的颜色格式同 color，不支持回调函数
        borderColor: '#273454',
        // 描边线宽。为 0 时无描边
        borderWidth: '5',
      },
    },
    // 饼图图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等
    label: {
      show: true,
      // 标签的位置
      position: 'outside',
      // 标签内容格式器，支持字符串模板和回调函数两种形式，字符串模板与回调函数返回的字符串均支持用 \n 换行
      formatter: '{d}%\n{hr|}',
      // 内边距padding: [3, 4, 5, 6]：表示 [上, 右, 下, 左] 的边距
      padding: [0, -43, 8, -43],
      // 在 rich 里面，可以自定义富文本样式
      rich: {
        hr: {
          // 背景色
          backgroundColor: 't',
          // 边框角度
          borderRadius: 100,
          width: 0,
          height: 10,
          padding: [3, 0, 0, 0],
          // 文字块的背景阴影颜色
          shadowColor: '#1c1b3a',
          // 背景阴影长度
          shadowBlur: 1,
          shadowOffsetX: '0',
          shadowOffsetY: '2',
        },
        a: {
          padding: [-35, 15, -20, 5],
        }
      }
    },
    // 标签的视觉引导线配置。在 label 位置 设置为'outside'的时候会显示视觉引导线
    // 那条指出来的线
    labelLine: {
      normal: {
        // 第一段长度
        length: 15,
        // 第二段长度
        length2: 50,
        // 这条线的样式
        lineStyle: {
          width: 1,
        }
      }
    },
    // label: {
    //     normal: {
    //         show: true, 
    //         position: 'inside', 
    //         formatter: '{d}%', 
    //         formatter: function(data){
    //             return data.percent.toFixed(0)+"%"; 
    //         },
    //         textStyle : { 
    //             align : 'center',
    //             baseline : 'middle',
    //             fontFamily : '微软雅黑',
    //             fontSize : 15,
    //             fontWeight : 'bolder'
    //         }
    //     },
    // },
  }],
}

// 使用刚指定的配置项和数据显示图表。
myChart6.setOption(option6);



window.addEventListener("resize", function () {
  myChart6.resize();
});

// 发送请求
function getChart() {
  // 左上角柱状图
  var request = new XMLHttpRequest();
  request.open('get', serverUrl + '/getVolunteerAgeVisual');
  request.send();
  request.onreadystatechange = function () {
    if (request.readyState == 4 && request.status == 200) {
      // console.log(request.responseText);
      var data = JSON.parse(request.responseText);
      option.series[0].data = [];
      option.yAxis.data = [];
      for (var i = 0; i < data.length; i++) {
        option.series[0].data.push(data[i].number);
        option.yAxis.data.push(data[i].ageGroup);
      }
      // console.log(option.series[0].data);
      myChart.setOption(option);
    }
  }
  // 左上角饼图
  var request2 = new XMLHttpRequest();
  request2.open('get', serverUrl + '/getVolunteerDegreeVisual');
  request2.send();
  request2.onreadystatechange = function () {
    if (request2.readyState == 4 && request2.status == 200) {
      // console.log(request.responseText);
      var data = JSON.parse(request2.responseText);
      option2.series[0].data = [];
      for (var i = 0; i < data.length; i++) {
        var d = {
          name: data[i].degree,
          value: data[i].number,
        }
        option2.series[0].data.push(d);
      }
      // console.log(option2.series[0].data);
      myChart2.setOption(option2);
    }
  }
  // 左下角折线图
  var request3 = new XMLHttpRequest();
  request3.open('get', serverUrl + '/getVolunteerGrowthTrendVisual');
  request3.send();
  request3.onreadystatechange = function () {
    if (request3.readyState == 4 && request3.status == 200) {
      // console.log(request.responseText);
      var data = JSON.parse(request3.responseText);
      option3.series[0].data = [];
      option3.xAxis.data = [];
      for (var i = 0; i < data.length; i++) {
        option3.series[0].data.push(data[i].number);
        option3.xAxis.data.push(data[i].date);
      }
      // console.log(option.series[0].data);
      myChart3.setOption(option3);
    }
  }
  // 中间柱状图
  var request4 = new XMLHttpRequest();
  // 累计服务对象统计
  request4.open('get', serverUrl + '/getServiceObjectVisual');
  request4.send();
  request4.onreadystatechange = function () {
    if (request4.readyState == 4 && request4.status == 200) {
      // console.log(request.responseText);
      var data = JSON.parse(request4.responseText);
      option4.series[0].data = [];
      option4.xAxis.data = [];
      for (var i = 0; i < data.length; i++) {
        option4.series[0].data.push(data[i].number);
        option4.xAxis.data.push(data[i].date);
      }
      // console.log(option.series[0].data);
      myChart4.setOption(option4);
    }
  }

  // 右上角折线图
  var request5 = new XMLHttpRequest();
  // 志愿活动增长趋势
  request5.open('get', serverUrl + '/getActivityGrowthTrendVisual');
  request5.send();
  request5.onreadystatechange = function () {
    if (request5.readyState == 4 && request5.status == 200) {
      // console.log(request.responseText);
      var data = JSON.parse(request5.responseText);
      option5.series[0].data = [];
      option5.xAxis.data = [];
      for (var i = 0; i < data.length; i++) {
        option5.series[0].data.push(data[i].number);
        option5.xAxis.data.push(data[i].date);
      }
      // console.log(option.series[0].data);
      myChart5.setOption(option5);
    }
  }

  // 左下角饼图
  var request6 = new XMLHttpRequest();
  // 右下角饼图活动类型
  request6.open('get', serverUrl + '/getActivityTypeVisual');
  request6.send();
  request6.onreadystatechange = function () {
    if (request6.readyState == 4 && request6.status == 200) {
      var data = JSON.parse(request6.responseText);
      option6.series[0].data = [];
      option6.legend.data = [];
      for (var i = 0; i < data.length; i++) {
        var d = {
          value: data[i].value,
          name: data[i].name,
        }
        option6.legend.data.push(data[i].name);
        option6.series[0].data.push(d);
      }
      // console.log(option6.series[0].data);
      myChart6.setOption(option6);
    }
  }
}
// 定时器，3秒发送一次请求
// setInterval(getChart, 3000);
getChart();

var ws = new WebSocket('ws://localhost/websocket/7')
ws.onopen = function () {
    // alert('chenggong')
}
ws.onerror = function () {
  alert('调用接口出错或者已失效');
}
ws.onmessage = function (res) {
    // var data = JSON.parse(res.data)
    // console.log(res);
    // console.log(res.data);
    if(res.data.indexOf('链接成功')==-1){
        console.log("第二");
        var dataReplace = res.data.replace(/\"\[/g, '[');
        dataReplace = dataReplace.replace(/\]\"/g, ']');
        // console.log(res.data);
        var data = JSON.parse(dataReplace);
        // console.log(data);

        // 左上角柱状图
        option.series[0].data = [];
        option.yAxis.data = [];
        for (var i = 0; i < data["各个年龄段志愿者"].length; i++) {
            option.series[0].data.push(data["各个年龄段志愿者"][i].number);
            option.yAxis.data.push(data["各个年龄段志愿者"][i].ageGroup);
        }
        // console.log(option.series[0].data);
        myChart.setOption(option);

        // 左上角饼图
        option2.series[0].data = [];
        for (var i = 0; i < data["各个学历志愿者"].length; i++) {
            var d = {
                name: data["各个学历志愿者"][i].degree,
                value: data["各个学历志愿者"][i].number,
            }
            option2.series[0].data.push(d);
        }
        myChart2.setOption(option2);

        // 左下角折线图
        option3.series[0].data = [];
        option3.xAxis.data = [];
        for (var i = 0; i < data["查询每年注册的志愿者数"].length; i++) {
            option3.series[0].data.push(data["查询每年注册的志愿者数"][i].number);
            option3.xAxis.data.push(data["查询每年注册的志愿者数"][i].date);
        }
        // console.log(option.series[0].data);
        myChart3.setOption(option3);

        // 中间柱状图
        option4.series[0].data = [];
        option4.xAxis.data = [];
        for (var i = 0; i < data["十二个月每个月累计的服务对象"].length; i++) {
            option4.series[0].data.push(data["十二个月每个月累计的服务对象"][i].number);
            option4.xAxis.data.push(data["十二个月每个月累计的服务对象"][i].date);
        }
        // console.log(option.series[0].data);
        myChart4.setOption(option4);

        // 志愿活动增长趋势        // 右上角折线图
        option5.series[0].data = [];
        option5.xAxis.data = [];
        for (var i = 0; i < data["每月开展的活动次数"].length; i++) {
            option5.series[0].data.push(data["每月开展的活动次数"][i].number);
            option5.xAxis.data.push(data["每月开展的活动次数"][i].date);
        }
        // console.log(option.series[0].data);
        myChart5.setOption(option5);

        // 左下角饼图
        option6.series[0].data = [];
        option6.legend.data = [];
        for (var i = 0; i < data["各个活动类型的活动数"].length; i++) {
            var d = {
                value: data["各个活动类型的活动数"][i].value,
                name: data["各个活动类型的活动数"][i].name,
            }
            option6.legend.data.push(data["各个活动类型的活动数"][i].name);
            option6.series[0].data.push(d);
        }
        // console.log(option6.series[0].data);
        myChart6.setOption(option6);
    }else {
        console.log("diyici");
    }
}
